import React, { Component } from 'react'
import { Text, StyleSheet, View, Button } from 'react-native'
import { createDrawerNavigator } from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/FontAwesome';

const Drawer = createDrawerNavigator();

function HomeScreen(prop) {
    return (
      <View style={[styles.container]}>
        <Text style={[styles.text]}>Home Screen</Text>
        <Button title={'to News Screen'} onPress={()=>{
            prop.navigation.openDrawer()
        }}/>
        <Button title={'to News Screen'} onPress={()=>{
            prop.navigation.toggleDrawer()
        }}/>
      </View>
    );
  }
  
  function NewsScreen(prop) {
      return (
        <View style={[styles.container]}>
          <Text style={[styles.text]}>News Screen</Text>
          <Button title={'to Home Screen'} onPress={()=>{
              prop.navigation.navigate('Home')
          }}/>
        </View>
      );
    }

export default class DerawerNavigator extends Component {
  render() {
    return (
      <Drawer.navigate
        drawerStyle={{
            while: 180,
            backgroundColor: 'white',
        }}
        drawerPosition={'right'} //设置抽屉的位置
        drawerType={'slide'} //设置抽屉的类型
      >
        <Drawer.Screen name="Home" component={HomeScreen} 
        options={{
          title: '首页',
          drawerIcon: ({focused,color,size}) =>{
            let iconName = 'home';
            return <Icon name={iconName} size={size} color={color} />;
          }
        }}/>
        <Drawer.Screen name="News" component={NewsScreen} 
        options={{
          title: '新闻',
          drawerIcon: ({focused,color,size}) =>{
            let iconName = 'newspaper-o';
            return <Icon name={iconName} size={size} color={color} />;
          }
        }}
        />
      </Drawer.navigate>
    )
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text:{
        fontSize: 20,
    }
})
